import React, {Component} from 'react';
import ReactDOM from 'react-dom';

const styles = {
  modal: {
    position: 'fixed',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
    backgroundColor: 'rgba(0,0,0, .3)',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center'
  },
  wrapper: {
    padding: 20,
    background: 'white',
    borderRadius: 8
  }
}

const modalRoot = document.querySelector('#modal-root');

class Modal extends Component {
  constructor (props) {
    super(props);
    this.el = document.createElement('div');
  }
  componentDidMount () {
    modalRoot.appendChild(this.el);
  }
  componentWillUnmount () {
    modalRoot.removeChild(this.el);
  }
  render () {
    return ReactDOM.createPortal(
      this.props.children,
      this.el
    )
  }
}

export default Modal;